<!-- 热点新闻 -->
<template>
  <div class="indexNews">
    <div class="line"></div>
    <div class="news">
      <div class="icon">
        <img
          src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978466633.png"
          alt=""
        />
      </div>
      <ul class="news-list" ref="list" :class="{ trans: flag }">
        <li v-for="(item, index) in newslist" :key="index">{{ item.title }}</li>
      </ul>
      <div class="more">
        <i class="iconfont icon-jiantou2"></i>
      </div>
    </div>
    <div class="imgs">
      <img
        src="https://x.dscmall.cn/storage/data/gallery_album/original_img/CPvH5WHHbF0EoG9XjRQbbT3knMVCeEt9DlYGQhJM.png?imageView2/2/format/webp"
        alt=""
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到components对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      newslist: [
        {
          id: 1,
          title: "服务店突破2000多家",
        },
        {
          id: 2,
          title: "我们成为中国最大家电零售B2B2C系统",
        },
        {
          id: 3,
          title: "三大国际腕表品牌签约",
        },
      ],
      timer: null,
      flag: false,
    };
  },
  methods: {
    scroll() {
      var ul = this.$refs.list;
      ul.style.top = "-3rem";
      this.flag = !this.flag;
      setTimeout(() => {
        this.newslist.push(this.newslist.shift());
        ul.style.top = "0";
        this.flag = !this.flag;
      }, 800);
    },
  },
  mounted() {
    this.timer = setInterval(this.scroll, 2000);
  },
  destroyed(){
    clearInterval(this.timer);
  }
};
</script>
<style lang="less">
.indexNews {
  .imgs {
    width: 100%;
    margin: 2rem 0;
    img {
      width: 100%;
      height: 17.4rem;
    }
  }
  .line {
    width: 100%;
    margin: 1rem 0 0.5rem 0;
    height: 1px;
    background-color: #ededed;
  }
  .news {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 3rem;
    overflow: hidden;
    img {
      height: 3rem;
      width: 7rem;
    }
    .news-list {
      width: 100%;
      width: calc(100% - 10rem);
      height: 3rem;
      position: absolute;
      top: 0;
      left: 9rem;
      li {
        height: 3rem;
        line-height: 3rem;
      }
    }
    .trans {
      transition: all 0.5s;
    }
    .more {
      margin-top: 5px;
      width: 1.8rem;
      height: 1.8rem;
      line-height: 1.8rem;
      text-align: center;
      border: 2px solid #f55;
      border-radius: 50%;
      color: #f55;
    }
  }
}
</style>